<template>
  <div class="article" v-if="model">
    <!-- 头部 -->
    <div class="article-header border-bottom d-flex py-3 px-2">
      <router-link
        tag="i"
        to="/"
        class="iconfont icon-back text-info-1"
      ></router-link>
      <strong class="flex-1 text-info-1 fs-lg ml-2">{{ model.title }}</strong>
      <div class="text-grey fs-xs">
        2021-1-1
      </div>
    </div>
    <!-- 内容 -->
    <div
      v-html="model.body"
      class="px-3 article-body fs-lg border-bottom"
    ></div>
    <div class="px-3 border-top">
      <div class="py-3 border-top">
        <i class="iconfont icon-Menu"></i>
        <strong class="text-info-1 fs-lg ml-2">相关资讯</strong>
      </div>
      <div>
        <router-link
          class="py-2"
          :to="`/article/${item._id}`"
          tag="div"
          v-for="item in model.related"
          :key="item._id"
        >
          {{ item.title }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: { required: true },
  },
  data() {
    return {
      model: null,
    };
  },
  watch: {
    id() {
      this.fetch();
    },
  },
  mounted() {
    this.fetch();
  },
  methods: {
    fetch() {
      this.$http.get(`article/${this.id}`).then((res) => {
        this.model = res.data;
      });
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/_variables.scss";
.article {
  .icon-back {
    font-size: 1.6923rem;
  }
  .article-body {
    img {
      max-width: 100%;
      height: auto;
    }
    iframe {
      width: 100%;
      height: auto;
    }
  }
}
</style>
